<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="never"><!--绕过防盗链-->
    <title>电影的影评</title>
    <script src="./js/jquery-1.12.3.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/jquery.bootgrid.min.css">
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/jquery.bootgrid.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" type="text/css"></link>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <nav class="navbar navbar-inverse">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">Mysql douban database</a>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <!--<li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">单表查询<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">film</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">跨表查询<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">还没实现</a></li>
                                    <li><a href="#">等待你的开发哦！</a></li>
                                    <li><a href="#">赶紧想个点子</a></li>
                                </ul>
                            </li>-->
                            <li><a href="fileupload">文件上传</a></li>
                            <li><a href="logout">注销</a></li>
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>
        </div>
    </div>
    <ol class="breadcrumb">
        <li><a href="showfilms">热门电影</a></li>
        <li class="active">电影影评</li>
    </ol>
    <div class="row">
        <div class="col-md-12">
            <h2 id="h2title">电影的影评</h2>
            <a  id="exportcontext" class="btn btn-primary" >导出为EXCEL</a>
            <button class="btn btn-primary" id="btnAdd"><span class="glyphicon glyphicon-zoom-in"></span>新增</button>



            <!--显示电影影评信息的表格-->
            <table id="grid-detail-mdata" class="table table-condensed table-hover table-striped">
                <thead>
                <tr>
                    <th data-column-id="filmname"  data-identifier="true" data-type="numeric">电影名称</th>
                    <th data-column-id="username">用户</th>
                    <th data-column-id="context">影评内容</th>
                    <th data-column-id="likenum">获赞数量</th>
                    <th data-column-id="commands" data-formatter="commands" data-sortable="false">修改</th>
                </tr>
                </thead>
            </table>

        </div>
    </div>
</div>


<!--影评详情模态框-->
<div class="modal fade" tabindex="-1" role="dialog" id="dlg_filmcontext">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">影评内容</h4>
            </div>
            <script>
                $(function () { $("[data-toggle='tooltip']").tooltip(); });
            </script>
            <div class="modal-body">
                <label for="film_context" id="label_film_context">评论用户</label>
                <button class="btn btn-primary btn-xs" id="btn-filmcontext-like"  data-toggle="tooltip" data-placement="right" title="为该评论者点赞">
                    <span class="glyphicon glyphicon-thumbs-up"></span>赞同
                </button>

                <table class="table">
                    <!--在模态框中嵌入表格-->
                    <tbody>
                    <tr ><!--显示图片-->
                        <td colspan="4" ><img id="film_img"width="135px" height="164px" /></td>
                        <td><textarea  id="film_context" class="form-control" rows="20" style="resize:none" readonly >评论内容</textarea></td>
                    </tr>

                    </tbody>
                </table>
                <input type="text" id="text_film_context_id" hidden>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!--添加电影影评的模态框-->
<div class="modal fade" tabindex="-1" role="dialog" id="dlg_addfilmcontext">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">影评内容</h4>
            </div>
            <script>
                $(function () { $("[data-toggle='tooltip']").tooltip(); });
            </script>
            <form id="form_addcontext" method="post">
            <div class="modal-body">
                <div class="form-group" hidden>
                    <label for="input_imdb_url" >imgdburl</label>
                    <input type="text" name="imdb_url" class="form-control" id="input_imdb_url" value="">
                </div>

                <div class="form-group">
                    <label for="input_username">评论者</label>
                    <input type="text" name="input_username" class="form-control" id="input_username" required>
                </div>

                <div class="form-group">
                    <label for="input_likes">获赞数</label>
                    <input type="number" name="input_likes" class="form-control" id="input_likes" required>
                </div>
                <div class="form-group">
                    <label for="input_filmcontext">评论内容</label>
                    <textarea name="input_filmcontext" class="form-control" id="input_filmcontext" required></textarea>
                </div>

                <div class="form-group" style="text-align: center;">
                    <button id="add_filmcontext" class="btn btn-primary">添加</button>
                </div>

            </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<script>
    $(function () { $("[data-toggle='tooltip']").tooltip(); });//鼠标放上去显示提示信息的js脚本
</script>


<script>

    var filmid;//showfilm.html页面传过来的参数 可以用于获取指定的电影影评 的参数
    //接收一个值
    function oneValues(){
        var result;
        var url=window.location.search; //获取url中"?"符后的字串
        if(url.indexOf("?")!=-1){
            result = url.substr(url.indexOf("=")+1);
            filmid=result;
        }
        return result;
    }
    //动态的更改导出电影影评超链接
    function exportcontext() {
        $('#exportcontext').attr('href','exportfilmcontext?filmid='+filmid);
    }
    
    //接收多值
    function manyValues(){
        var url=window.location.search;
        if(url.indexOf("?")!=-1){
            var str = url.substr(1);
            strs = str.split("&");
            var key=new Array(strs.length);
            var value=new Array(strs.length);
            for(i=0;i<strs.length;i++){
                key[i]=strs[i].split("=")[0]
                value[i]=unescape(strs[i].split("=")[1]);
                alert(key[i]+"="+value[i]);
            }
        }
    }

    /*bootstrap初始化函数
    *whitchgrid ：表示那个#grid-data要执行  ，
    *url： 必选想 表示需要请求 返回数据的路径
    *condition : 可选项 搜索电影的时候 根据什么类型查询 如：电影名称，电影类型，电影的评分等等。
    *keyword: 可选项   搜索电影的时候 传入的参数*/
    $(document).ready(grid2("#grid-detail-mdata","getFilmContext","","",oneValues()));
    $(document).ready(getfilmname());
   function  getfilmname() {
       $.post("getfilmbyid" ,{id:oneValues()}, function (str) {//更改h2内容
           $("#h2title").html("《"+str.obj.name+"》影评");
           exportcontext();
   });
   }
    var gridstr;/*保存电影的id*/

    function grid2( whitchgrid,url,condition,keyword,id){

        //想要多次调用bootgrid方法  需要先销毁之前生成的  本来想要用参数动态销毁的 但是不行
        $("#grid-detail-mdata").bootgrid("destroy");//销毁bootgrid方法
        $("#grid-data").bootgrid("destroy");


        if (whitchgrid=="#grid-data"){      /*如果当前使用的是#grid-data(电影基本信息表格)，就讲#grid-detail-mdata(电影影评的基本表格隐藏)*/
            $("#grid-data").show();
            $("#grid-detail-mdata").hide();
        }if(whitchgrid=="#grid-detail-mdata"){
            $("#grid-detail-mdata").show();
            $("#grid-data").hide();
        }

        var grid =$(whitchgrid).bootgrid({//bootgrid方法初始化
            ajax:true,
            url:url,/*url通过参数传入*/
            post:{"condition":condition,"keyword":keyword,"id":id},//需要发送的参数通过参数传入
            ajaxSettings: {
                method: "GET",
            },
            navigation:2,
            formatters: {//格式化
                "commands": function(column, row)
                {//返回编辑按钮
                    if(whitchgrid=="#grid-data"){

                            return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\">编辑<span class=\"glyphicon glyphicon-pencil\"></span></button> " +
                                "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.id + "\">删除<span class=\"fa fa-trash-o\"></span></button>" +
                                "<button type=\"button\" class=\"btn btn-xs btn-default command-detail\" data-row-id=\"" + row.id + "\">查看影评<span class=\"fa fa-trash-o\"></span></button>";

                        };
                    if(whitchgrid=="#grid-detail-mdata"){

                        return "<button  id='btn_film_context' type=\"button\" class=\"btn btn-xs btn-default command-context-detail\" data-row-id=\"" + row.id + "\">详情<span class=\"glyphicon glyphicon-pencil\"></span></button> "+
                            "<button type=\"button\" class=\"btn btn-xs btn-default command-deletecontext\" data-row-id=\"" + row.id + "\">删除<span class=\"fa fa-trash-o\"></span></button>";

                    };/*====END if*/
                }
            }

        }).on("loaded.rs.jquery.bootgrid", function()//加载完毕的时候
        {
            /*点击 编辑 或 删除 图标  执行以下操作*/
            /* Executes after data is loaded and rendered */
            grid./*find(".command-edit").on("click", function(e)
            {

                    $("#dlg_film-edit").modal();//编辑模态框
                    $.post("getfilmbyid" ,{id:$(this).data("row-id")}, function (str) {//造编辑actor的请求路径
                        $("#id-edit").val(str.obj.id);
                        $("#year-edit").val(str.obj.year);
                        $("#name-edit").val(str.obj.name);
                        $("#directors-edit").val(str.obj.directors);
                        $("#writers-edit").val(str.obj.writers);
                        $("#actors-edit").val(str.obj.actors);
                        $("#tags-edit").val(str.obj.tags);
                        $("#areas-edit").val(str.obj.areas);
                        $("#languages-edit").val(str.obj.languages);
                        $("#releaseDates-edit").val(str.obj.releaseDates);
                        $("#duration-edit").val(str.obj.duration);
                        $("#otherNames-edit").val(str.obj.otherNames);
                        $("#imdbUrl-edit").val(str.obj.imdbUrl);
                        $("#star-edit").val(str.obj.star);
                        $("#evaluateNum-edit").val(str.obj.evaluateNum);
                        $("#url-edit").val(str.obj.url);
                    });

            }).end().find(".command-delete").on("click", function(e)//点击删除执行
            {
                var r = confirm("你确定要删除电影 " + $(this).data("row-id") + " 的信息吗?");
                if(r) {
                    $.post("deletefilms", {id: $(this).data("row-id")}, function () {
                        alert("删除成功");
                        $("#grid-data").bootgrid("reload");
                    });
                };
            }).end().find(".command-detail").on("click",function(e){//点击查看影评按钮执行
                gridstr=$(this).data("row-name");

                var r= confirm("你确定要查看"+$(this).data("row-id")+"电影影评");
                if(r) {
                    grid2("#grid-detail-mdata", "getFilmContext", "", "", $(this).data("row-id"));

                    $.post("getfilmbyid" ,{id:$(this).data("row-id")}, function (str) {//更改h2内容
                        $("#h2title").html("《"+str.obj.name+"》影评");
                    });
                }
            }).end().*/find(".command-context-detail").on("click",function(e){

                    $("#dlg_filmcontext").modal();
                    $.get("getfilmcontextbyid/"+$(this).data("row-id"),function(str){
                        $("#label_film_context").html("豆瓣用户："+str.obj.username);/*val(str.obj.username);*/
                        $("#film_context").val("短评:"+str.obj.context);
                        var url2 = str.obj.imgurl;
                        $("#film_img").attr("src",url2)
                        $("#text_film_context_id").val(str.obj.id);
                    });/*====end of  $.get()*/
            }).end().find(".command-deletecontext").on("click",function (e) {//删除一则电影的评论
                var r =confirm("确定要删除"+$(this).data("row-id")+"影评内容");
                if(r){
                    $.post("deletefilmcontextbyid", {id: $(this).data("row-id")}, function () {
                        alert("删除成功");
                        $("#grid-detail-mdata").bootgrid("reload");
                    });

                }
            });
        });
    }/*============END OF grid2() ==========*/



    //注册点击搜索按钮的点击事件监听
    $(document).ready(function() {
        /*$("#grid-data").bootgrid("destroy");*///多次调用bootgrid()方法  需要销毁他 然后在进行初始化
        $("#btn_search").click(function () {
            grid2("#grid-data","getCondition",$("#select-condition").val(),$("#keyword").val());
        });
    });

//点击新增按钮
    $("#btnAdd").click(function () {
        $("#dlg_addfilmcontext").modal();
        $.post("getfilmbyid",{id:filmid},function (str) {//自动添加该电影的imdburl
            $("#input_imdb_url").val(str.obj.imdbUrl)
        })
    });

    /*点击模态框中的点赞按钮*/
    $("#btn-filmcontext-like").click(function () {
        $.ajax({
            url:"filmcontexlike",
            type:"POST",
            data:{id:$("#text_film_context_id").val()},
            success:function (data) {
                alert("点赞成功")
            }

        });
    });

/*点击添加电影评论模态框中的添加按钮*/
    $("#add_filmcontext").click(function () {
        $.post("addfilmcontext",
            {imbdurl:$("#input_imdb_url").val(),
                                    username:$("#input_username").val(),
                                    likes:$("#input_likes").val(),
                                    filmcontext:$("#input_filmcontext").val()},
            function (str) {
                alert("添加成功！"+"影评的编号为"+str.obj.id);
        });
    });

</script>

</body>

</html>
